<template>
    <view class="w750" :style="{ '--themescolor': themes.color }">
        <!-- /头部 -->
		<view class="position-fixed top-0 w-100vw h-100vh text-center" style="background-color: #019fe8 ;" v-if="!isWeixin">
			<view class=" mt-15">
				<u-icon name="zhifubao-circle-fill" color="#fff" :size="160"></u-icon>
				<view class="text-fff font-40 letter-sp4 mt-3">我有我的方式</view>
			</view>
		</view>
		<template v-else>
			<view class="J-weixin-tip-img weixin-tip-img" :class="isApple ? 'iphone' : 'android'"></view>
		</template>
		<view class="pay" v-html="payData" v-show="payData"></view>
    </view>
</template>

<script>
import { getUa } from '@/utils/utils.js';
import { orderApi } from '@/api/ModulesOrder.js';
export default {
    data() {
        return {
            isWeixin: true, // 支付成功返回的
            isApple: false, // 实在安卓还是ios打开, 设备类型
            source: null, // 来源, 订单: ORDER, 充值: RECARGE
            payData: null ,// 支付成功返回的
			timer:null, // 调用定时器
			num:null, // 调用次数
			subSettlementSn:null,// 支付号
        };
    },
    created() { },
    onLoad(option) {
	  this.payData = option.payData || null
	  this.subSettlementSn = option.subSettlementSn || null
	  this.source = option.source || null
    },
	computed: { },
	
    mounted() {
        // 获取用户浏览器代理
        // #ifdef H5
        this.isWeixin = getUa().isWeixin;
        this.isApple = getUa().isApple;
        // #endif
        // 如果不是微信浏览器, 则自动支付
        if (!this.isWeixin && this.payData) {
           this.$nextTick(() => {
                document.forms[0].submit();
			   // this.pollingPayResult()
           });
        }else{
			// uni.showLoading({ title: '支付中',mask:true });
			if(this.subSettlementSn){
				this.timer = setInterval(this.pollingPayResult(), 3000)
			}
		}
    },
	onUnload(){
		clearInterval(this.timer)
	},
	onBackPress(options) {
	    clearInterval(this.timer)
	},
	beforeDestroy() {
		clearInterval(this.timer)
	},
    methods: {
		// 轮询支付结果
		pollingPayResult(){
				this.num++
				// 获取成功的订单数据
				orderApi.successOrderDetail(this.subSettlementSn).then(res => {
				    if (res.code == 1) {
						if(res.data.state === 1){
							 clearInterval(this.timer)
							 uni.hideLoading()
							 uni.redirectTo({
							     url: `/ModuleOrder/submitOrder/orderPayResult?subSettlementSn=` + this.subSettlementSn
							 });
							 console.log('成功了')
						}
						// if(this.num===30){
						if(this.num === 5){
							uni.hideLoading()
							clearInterval(this.timer);
						}
				    }
				})
			return this.pollingPayResult
		},
       
    }
};
</script>

<style scoped>
.weixin-tip {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 15px;
    right: 20px;
    width: 265px;
    padding: 75px 0 0;
    text-align: left;
    margin-bottom: 30px;
    font-size: 14px;
    background: url()
        no-repeat right top;
    background-size: 45px 68px;
}

.weixin-tip-img {
    padding: 110px 0 0;
}

.weixin-tip-img::after {
    display: block;
    margin: 15px auto;
    content: ' ';
    background-size: cover;
}

.weixin-tip-img.iphone::after {
    width: 150px;
    height: 150px;
    background-image: url();
}

.weixin-tip-img.android::after {
    width: 173px;
    height: 240px;
    background-image: url();
}
</style>
